<template>
	<view :class="themeName">
		<view class="transfer-record">
			<u-tabs font-size="28" name="tabsName" inactive-color="#333" :active-color="themeColor" :list="list"
				:is-scroll="false" :current="current" @change="change">
			</u-tabs>

			<mescroll-uni ref="mescrollRef" bgColor="white" top="90rpx" @init="mescrollInit" :down="downOption"
				:up="upOption" @down="downCallback" @up="upCallback">

				<view class="list m-t-20" v-if="lists.length !== 0">
					<view v-for="(item, index) in lists" :key="index" class="item bg-white flex">
						<view class="flex-none m-r-20">
							<u-image width="68rpx" height="68rpx" border-radius="50%" :src="item.avatr"></u-image>
						</view>
						<view class="flex-1 m-r-20">
							<view class="black m-b-10">{{ item.nickname }}</view>
							<view class="xs muted">{{ $zhTran('会员ID') }}:{{ item.sn }}</view>
							<view class="xs muted">{{ item.create_time }}</view>
						</view>
						<view theme class="lg flex-none ">
							{{ item.money_desc }}
						</view>
					</view>
				</view>

				<w-jishuzhichi :class="[{ 'jishuzhichi-nodata': lists.length == 0 }]" />
			</mescroll-uni>

		</view>
	</view>
</template>

<script>
// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------
import {
	transferRecord
} from "@/api/user";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			list: [{
				tabsName: this.$zhTran('全部'),
				isShow: true,
				type: ''
			}, {
				tabsName: this.$zhTran('转入'),
				isShow: false,
				type: 'in'
			}, {
				tabsName: this.$zhTran('转出'),
				isShow: false,
				type: 'out'
			}],
			current: 0,
			lists: [],

			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: this.$getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
					tip: this.$zhTran('暂无转账记录'), // 提示
					fixed: true,
					top: "200rpx",
				}
			}
		};
	},

	methods: {
		change(index) {
			for (let i = 0; i < this.list.length; i++) {
				this.list[i].isShow = false
			}
			this.current = index;
			this.upCallback({
				num: 1,
				size: 10
			});
			this.list[index].isShow = true
		},

		upCallback(page) {
			let num = page.num;
			let size = page.size

			transferRecord({
				type: this.list[this.current].type,
				page_no: num,
				page_size: size
			}).then(res => {
				if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
				this.lists = this.lists.concat(res.lists); //追加新数据
				this.lists = this.$zhTran(this.lists)
				this.mescroll.endSuccess(res.lists.length, res.more == 0 ? false : true, '');
			}).catch(err => {
				this.mescroll.endErr()
			})

		}
	},

	onShow() {
		this.upCallback({
			num: 1,
			size: 10
		})
	},
	onLoad() {
		if (this.$Route.meta.atitle) {
			uni.setNavigationBarTitle({
				title: this.$zhTran(this.$Route.meta.atitle)
			})
		}
	}
};
</script>
<style lang="scss">
.transfer-record {
	.list {
		.item {
			padding: 20rpx 30rpx;
			border-bottom: $-solid-border;
			align-items: flex-start;
		}
	}
}
</style>